<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人力资源表格</title>
    <!-- 引入Element UI样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
            background-color: #f5f5f5;
        }
        
        .container {
            width: 100%;
            margin: 0;
            background-color: white;
            border-radius: 0;
            box-shadow: none;
            overflow: hidden;
        }
        
        .instructions {
            background-color: white;
            padding: 15px;
            border-bottom: 1px solid #e9ecef;
            border-left: 4px solid #409eff;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        
        .instructions h2 {
            color: #2c3e50;
            margin: 0 0 15px 0;
            font-size: 20px;
            font-weight: 500;
        }
        
        .instructions ul {
            margin: 0;
            padding-left: 20px;
            color: #555;
            line-height: 1.6;
        }
        
        .instructions li {
            margin-bottom: 8px;
        }
        
        .table-section {
            padding: 25px;
        }
        
        .table-section h2 {
            color: #2c3e50;
            margin: 0 0 20px 0;
            font-size: 20px;
            font-weight: 500;
        }
        
        .editable-table {
            border: 1px solid #ebeef5;
            border-radius: 4px;
            overflow: hidden;
        }
        
        .editable-table .el-table__header-wrapper {
            background-color: #f5f7fa;
        }
        
        .editable-table .el-table__body-wrapper {
            background-color: white;
        }
        
        .editable-cell {
            padding: 4px;
            border: none;
            background: transparent;
            width: 100%;
            text-align: center;
            font-size: 14px;
        }
        
        .editable-table .el-table__body td {
            padding: 4px 0;
        }
        
        .editable-table .el-table__header th {
            padding: 8px 0;
        }
        
        .editable-cell:focus {
            outline: 2px solid #409eff;
            background-color: #f0f9ff;
        }
        
        .category-header {
            background-color: #e6f7ff !important;
            font-weight: 600;
            color: #1890ff;
        }
        
        .subcategory-header {
            background-color: #f6ffed !important;
            font-weight: 500;
            color: #52c41a;
        }
        
        .month-header {
            background-color: #fff7e6 !important;
            font-weight: 500;
            color: #fa8c16;
            text-align: center;
        }
        
        .toolbar {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            background-color: white;
            border-bottom: 1px solid #e9ecef;
            padding: 10px 20px;
            z-index: 1000;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }
        
        .toolbar .el-button {
            margin: 0 5px;
        }
        
        .main-content {
            margin-top: 60px;
        }
        
        /* 自定义表格头部样式 */
        .el-table__header th {
            background-color: #f5f7fa !important;
        }
    
        /* 分组头部样式 */
        .el-table .actual-header th {
            background-color: #e6f7ff !important;
            color: #1890ff !important;
            font-weight: bold !important;
        }
        
        .el-table .forecast-header th {
            background-color: #f6ffed !important;
            color: #52c41a !important;
            font-weight: bold !important;
        }
        
        .el-table .budget-header th {
            background-color: #fff7e6 !important;
            color: #fa8c16 !important;
            font-weight: bold !important;
        }
        
        /* 月份列头部样式 */
        .el-table .actual-month-header th {
            background-color: #e6f7ff !important;
            color: #1890ff !important;
        }
        
        .el-table .forecast-month-header th {
            background-color: #f6ffed !important;
            color: #52c41a !important;
        }
        
        .el-table .budget-month-header th {
            background-color: #fff7e6 !important;
            color: #fa8c16 !important;
        }
        
        /* 更具体的选择器 */
        .el-table__header .actual-header {
            background-color: #e6f7ff !important;
            color: #1890ff !important;
        }
        
        .el-table__header .forecast-header {
            background-color: #f6ffed !important;
            color: #52c41a !important;
        }
        
        .el-table__header .budget-header {
            background-color: #fff7e6 !important;
            color: #fa8c16 !important;
        }
        
        .el-table__header .actual-month-header {
            background-color: #e6f7ff !important;
            color: #1890ff !important;
        }
        
        .el-table__header .forecast-month-header {
            background-color: #f6ffed !important;
            color: #52c41a !important;
        }
        
        .el-table__header .budget-month-header {
            background-color: #fff7e6 !important;
            color: #fa8c16 !important;
        }
        

    </style>
</head>
<body>
    <div id="app">
        <!-- 顶部工具栏 -->
        <div class="toolbar">
            <el-button type="primary" @click="saveData">暂存数据</el-button>
            <el-button type="primary" @click="saveData">保存&提交</el-button>
            <!-- <el-button type="info" @click="loadData">📂 加载数据</el-button> -->
        </div>
        
        <div class="main-content">
            <div class="container">
                <!-- 填写说明 -->
            <div class="instructions">
                <h2>📋 填写说明</h2>
                <ul>
                    <li><strong>Category分类：</strong>
                        <ul>
                            <li><strong>Total：</strong>该Function下的总人数（自动计算）</li>
                            <li><strong>Permanent：</strong>正式员工</li>
                            <li><strong>Overtime/FTE：</strong>加班/全职等效人员</li>
                            <li><strong>Temporary：</strong>临时工/合同工</li>
                        </ul>
                    </li>
                    <li><strong>数据填写：</strong>只需要填写表格中Forecast的数据，直接在表格单元格中点击并输入数字，支持小数</li>
                </ul>
            </div>
            
            <!-- 表格区域 -->
            <div class="table-section">
                <h2>📊 人力资源需求表格</h2>
                
                <div class="editable-table">
                    <el-table :data="tableData" border style="width: 100%" :span-method="objectSpanMethod">
                        <el-table-column prop="bu" label="BU" width="100" fixed="left" align="center">
                            <template slot="header" slot-scope="scope">
                                <div style="text-align: center;">BU</div>
                            </template>
                            <template slot-scope="scope">
                                <span v-if="scope.row.isCategory" class="category-header">{{ scope.row.bu }}</span>
                                <span v-else style="display: none;"></span>
                            </template>
                        </el-table-column>
                        
                        <el-table-column prop="category" label="Function" width="120" fixed="left" align="center">
                            <template slot="header" slot-scope="scope">
                                <div style="text-align: center;">Function</div>
                            </template>
                            <template slot-scope="scope">
                                <span v-if="scope.row.isCategory" class="category-header">{{ scope.row.category }}</span>
                                <span v-else style="display: none;"></span>
                            </template>
                        </el-table-column>
                        
                        <el-table-column prop="subcategory" label="Category" width="150" fixed="left" align="center">
                            <template slot="header" slot-scope="scope">
                                <div style="text-align: center;">Category</div>
                            </template>
                            <template slot-scope="scope">
                                {{ scope.row.subcategory }}
                            </template>
                        </el-table-column>
                        
                        
                        <!-- 实际数据列 -->
                        <el-table-column label="Actual" align="center" class-name="actual-header">
                            <el-table-column v-for="month in actualMonths" :key="'actual-' + month" :label="month" width="80" align="center" class-name="actual-month-header">
                                <template slot="header" slot-scope="scope">
                                    <div style="text-align: center;">
                                        <div>{{ month }}</div>
                                    </div>
                                </template>
                                <template slot-scope="scope">
                                    <span v-if="!scope.row.isCategory">{{scope.row['actual-' + month]}}</span>
                                    <span v-else class="month-header">{{ getCategoryTotal(scope.row.category, 'actual-' + month) }}</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        
                        
                        <!-- 预测数据列 -->
                         <el-table-column label="Forecast" align="center" class-name="forecast-header">
                             <el-table-column v-for="month in forecastMonths" :key="'forecast-' + month" :label="month" width="80" align="center" class-name="forecast-month-header">
                                <template slot="header" slot-scope="scope">
                                    <div style="text-align: center;">
                                        <div>{{ month }}</div>
                                    </div>
                                </template>
                                <template slot-scope="scope">
                                    <input 
                                        v-if="!scope.row.isCategory"
                                        v-model="scope.row['forecast-' + month]" 
                                        type="number" 
                                        step="0.1" 
                                        min="0"
                                        class="editable-cell"
                                        @input="calculateTotals"
                                        @blur="validateInput(scope.row, 'forecast-' + month)"
                                    >
                                    <span v-else class="month-header">{{ getCategoryTotal(scope.row.category, 'forecast-' + month) }}</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        
                        <!-- Budget数据列 -->
                         <el-table-column label="Budget" align="center" class-name="budget-header">
                             <el-table-column v-for="month in budgetMonths" :key="'budget-' + month" :label="month" width="80" align="center" class-name="budget-month-header">
                                <template slot="header" slot-scope="scope">
                                    <div style="text-align: center;">
                                        <div>{{ month }}</div>
                                    </div>
                                </template>
                                <template slot-scope="scope">
                                    <span v-if="!scope.row.isCategory">{{scope.row['budget-' + month]}}</span>
                                    <span v-else class="month-header">{{ getCategoryTotal(scope.row.category, 'budget-' + month) }}</span>
                                </template>
                            </el-table-column>
                        </el-table-column>
                        

                    </el-table>
                </div>
            </div>
        </div>
        </div>
    </div>

    <!-- 引入Vue.js -->
    <script src="https://unpkg.com/vue@2/dist/vue.js"></script>
    <!-- 引入Element UI -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    actualMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月'],
                    forecastMonths: ['8月', '9月', '10月'],
                    budgetMonths: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
                    categories: ['维修', '质量', '生产'],
                    bus: ['BU1', 'BU1', 'BU2'],
                    subcategories: ['Permanent', 'Overtime/FTE', 'Temporary'],
                    tableData: []
                }
            },

            mounted() {
                this.initializeTable();
                this.loadData();
            },
            methods: {
                initializeTable() {
                    this.tableData = [];
                    
                    this.categories.forEach((category, index) => {
                        // 添加分类标题行
                        this.tableData.push({
                            bu: this.bus[index],
                            category: category,
                            isCategory: true,
                            subcategory: 'Total',
                        });
                        
                        // 添加子分类行
                        this.subcategories.forEach(subcategory => {
                            const row = {
                                bu: this.bus[index],
                                category: category,
                                subcategory: subcategory,
                                isCategory: false,
                                isTotal: true
                            };
                            
                            // 初始化实际数据 (1-7月)
                            this.actualMonths.forEach(month => {
                                row['actual-' + month] = 0;
                            });
                            
                            // 初始化预测数据 (8-10月)
                            this.forecastMonths.forEach(month => {
                                row['forecast-' + month] = 0;
                            });
                            
                            // 初始化Budget数据 (1-12月)
                            this.budgetMonths.forEach(month => {
                                row['budget-' + month] = 0;
                            });
                            
                            this.tableData.push(row);
                        });
                    });
                },
                
                objectSpanMethod({ row, column, rowIndex, columnIndex }) {
                    if (columnIndex === 0) {
                        if (row.isCategory) {
                            return {
                                rowspan: 4,
                                colspan: 1
                            };
                        } else {
                            return {
                                rowspan: 0,
                                colspan: 0
                            };
                        }
                    }
                    if (columnIndex === 1) {
                        if (row.isCategory) {
                            return {
                                rowspan: 4,
                                colspan: 1
                            };
                        } else {
                            return {
                                rowspan: 0,
                                colspan: 0
                            };
                        }
                    }
                },
                
                getRowTotal(row) {
                    let total = 0;
                    
                    // 计算实际数据总和
                    this.actualMonths.forEach(month => {
                        total += parseFloat(row['actual-' + month]) || 0;
                    });
                    
                    // 计算预测数据总和
                    this.forecastMonths.forEach(month => {
                        total += parseFloat(row['forecast-' + month]) || 0;
                    });
                    
                    // 计算Budget数据总和
                    this.budgetMonths.forEach(month => {
                        total += parseFloat(row['budget-' + month]) || 0;
                    });
                    
                    return total.toFixed(1);
                },
                
                getCategoryTotal(category, monthKey) {
                    const total = this.tableData
                        .filter(row => row.category === category && !row.isCategory && !row.isTotal)
                        .reduce((total, row) => {
                            return total + (parseFloat(row[monthKey]) || 0);
                        }, 0);
                    return total.toFixed(1);
                },
                
                calculateTotals() {
                    // 触发计算属性更新
                    this.$forceUpdate();
                },
                
                headerCellStyle({ column, columnIndex }) {
                    // 为分组标题设置样式
                    if (column.label === 'Actual') {
                        return { backgroundColor: '#e6f7ff', color: '#1890ff', fontWeight: 'bold', textAlign: 'center' };
                    }
                    if (column.label === 'Forecast') {
                        return { backgroundColor: '#f6ffed', color: '#52c41a', fontWeight: 'bold', textAlign: 'center' };
                    }
                    if (column.label === 'Budget') {
                        return { backgroundColor: '#fff7e6', color: '#fa8c16', fontWeight: 'bold', textAlign: 'center' };
                    }
                    
                    // 为月份列设置样式 - 根据实际列索引调整
                    // 前3列是固定列，然后是Actual的7列，Forecast的3列，Budget的12列
                    if (columnIndex >= 3 && columnIndex <= 9) {
                        // Actual 月份列 (1-7月)
                        return { backgroundColor: '#e6f7ff', color: '#1890ff' };
                    } else if (columnIndex >= 10 && columnIndex <= 12) {
                        // Forecast 月份列 (8-10月)
                        return { backgroundColor: '#f6ffed', color: '#52c41a' };
                    } else if (columnIndex >= 13 && columnIndex <= 24) {
                        // Budget 月份列 (1-12月)
                        return { backgroundColor: '#fff7e6', color: '#fa8c16' };
                    }
                    
                    return {};
                },
                
                validateInput(row, month) {
                    const value = parseFloat(row[month]);
                    if (isNaN(value) || value < 0) {
                        row[month] = 0;
                        this.$message.warning('请输入有效的非负数');
                    } else {
                        row[month] = value;
                    }
                },
                
                saveData() {
                    const data = {
                        tableData: this.tableData,
                        timestamp: new Date().toISOString()
                    };
                    
                    localStorage.setItem('hrTableData', JSON.stringify(data));
                    this.$message.success('数据已保存到本地存储');
                },
                
                loadData() {
                    const savedData = localStorage.getItem('hrTableData');
                    if (savedData) {
                        try {
                            const data = JSON.parse(savedData);
                            this.tableData = data.tableData;
                            this.$message.success('数据已从本地存储加载');
                        } catch (error) {
                            this.$message.error('加载数据失败');
                        }
                    } else {
                        this.$message.info('没有找到保存的数据');
                    }
                }
            }
        });
    </script>
</body>
</html> 